<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/3
  Time: 7:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="resourse/css/layui.css" media="all">
    <script src="resourse/layui.js"></script>
</head>
<body>

<form class="layui-form" style="text-align: center ;padding-top: 20px">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="tel" name="usernme"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-warm" lay-submit="" lay-filter="demo1">查询</button>
            <button type="reset" class="layui-btn layui-btn-warm">重置</button>
        </div>
    </div>
</form>
<div  >
    <div class="layui-btn-container" id="bar">
        <button class="layui-btn layui-btn-sm" id="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" id="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" id="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" id="reload">表格重载</button>
    </div>
</div>
<table id="demo" lay-filter="test"></table>






<script type="text/html" id="tool">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" id="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" id="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" id="reload">表格重载</button>
    </div>


</script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchdelete">批量删除</button>
</script>
<script type="text/html" id="celltoolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
</script>

<script type="text/html" id="titleTpl">
    {{#  if(d.is_hot ==1){ }}
    <span class="layui-red">热门</span>
    {{#  } else { }}
    <span class="layui-red">不热门</span>
    {{#  } }}
</script>

<script>
    layui.use(['table','layer','jquery'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var $=layui.jquery;

        //第一个实例
      var tableins=  table.render({
            elem: '#demo'
//            ,height: 312
            ,url: '${pageContext.request.contextPath}/pro' //数据接口
            ,parseData: function(res) { //res 即为原始返回的数据
                console.log(res);
              alert(res.count);
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.count, //解析数据长度

                    "data": res//解析数据列表
                };
            }

            ,toolbar:'#toolbarDemo'
            ,height:"500px"
//            ,url: 'json/product.json'
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'checkbox', title: '选择', width:150,type:'checkbox',fixed:'left' },
                {field: 'pid', title: 'PID', width:150, sort: true,}
                ,{field: 'pname', title: '商品名', width:150,edit	:Text}
                ,{field: 'market_price', title: '市场价', width:150, sort: true,totalRow:true}
                ,{field: 'shop_price', title: '商城价', width:150}
//                ,{field: 'pimage', title: '图片地址', width: 177}
                ,{field: 'pdate', title: '上架日期', width: 150, sort: true}
                ,{field: 'is_hot', title: '是否热门', width: 150, sort: true,templet:function(obj){
                  return obj.is_hot==1?"热门":"不热门";
                }}
                ,{field: 'pdesc', title: '商品描述', width: 200}
                ,{field: 'pflag', title: '是否付款', width: 150, sort: true}
                ,{field: 'cid', title: '商品种类', width: 150, sort: true}
                  ,{field: 'tool',  width: 150, toolbar:'#celltoolbar',fixed:'right'}
            ]]
//            ,done:function (data) {
//                alert("表格渲染完毕")
//            }
            ,totalRow:true
            ,page:true
            ,limit:10
//            ,limits:[15,30]

        });


        $("#getCheckData").click(function () {
            var checkStatus = table.checkStatus('demo');
//            alert(checkStatus.data);
           alert(checkStatus.data);
            layer.alert(JSON.stringify(checkStatus.data));
        });

        $("#getCheckLength").click(function () {
            var checkStatus = table.checkStatus('demo');
            layer.alert(checkStatus.data.length);
        });

        $("#isAll").click(function () {
            var checkStatus = table.checkStatus('demo');
            layer.alert(checkStatus.isAll);
        });


        $("#reload").click(function () {
            var checkStatus = table.checkStatus('demo');
            tableins.reload();
        })


        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        content: 'form.jsp',
                        area: ['700px', '500px'],
                        shade: [0.8, '#393D49'],

                    });


                    layer.msg('添加');
                    break;
                case 'batchdelete':
                    var checkStatus = table.checkStatus('demo');
                    if(checkStatus.data.length>0){
                        layer.alert(JSON.stringify(checkStatus.data));
                    }else{
                        layer.msg('请选择操作行删除');
                    }

                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });

        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'update'){ //查看
                //do somehing
                layer.msg("更新中");
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
        });

    });
</script>
</body>
</html>
